<template>
  <div>
    <div class="dashboard-container">
      <div class="big-back-box">
        <div class="top">平台求助列表</div>
        <div style="height: 20px"></div>
        <el-card class="box-card" style="margin: 0 auto">
          <!-- 关键字搜索 -->
          <div style="height: 20px; color: #409eff; line-height: 20px">
            关键字查询
          </div>
          <br />
          <el-input
            v-model="searchTitle"
            placeholder="请输入标题关键字"
            style="width: 400px"
          ></el-input>
          <!-- <span>this.searchTitle:{{ this.searchTitle }}</span> -->
          <!-- <el-button
            style="margin-left: 28px"
            type="primary"
            @click="searchByName"
            >搜索</el-button
          > -->
          <br /><br />
          <!-- 条件搜索 -->
          <div style="height: 20px; color: #409eff; line-height: 20px">
            状态
          </div>
          <br />
          <el-form :inline="true" class="demo-form-inline">
            <!-- 状态 -->
            <el-select v-model="searchState" placeholder="请选择状态">
              <el-option
                v-for="item in stateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-form-item>
              <!-- <span>this.searchState:{{ this.searchState }}</span> -->
            </el-form-item>
            <!-- 查询按钮 -->
            <el-form-item>
              <el-button type="primary" @click="searchByStateAndTitle"
                >查询</el-button
              >
            </el-form-item>
          </el-form>

          <!-- 列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="编号" align="center" width="50">
              <template slot-scope="{ row }">
                <span>{{ row.id }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="发起时间" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.initiationTime }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="求助标题" align="center" width="225">
              <template slot-scope="{ row }">
                <span>{{ row.title }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="类型" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.type }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="150">
              <template slot-scope="{ row }">
                <span v-if="row.state=='inOrderGrabbing'">抢单中</span>
                <span v-if="row.state=='received'">已接单</span>
              </template>
            </el-table-column>
            <el-table-column label="求助方id" align="center" width="125">
              <template slot-scope="{ row }">
                <span>{{ row.buyerId }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="抢单人数" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.orderGrabbingNumber }}</span>          
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="{ row }">
                <router-link
                  :to="{ path: '/lawHelp/lawyerReadMore', query: row }"
                >
                  <el-button type="text">详情</el-button>
                </router-link>
                <router-link
                  :to="{ path: '/lawHelp/lawyerSelfRecommend', query: row }"
                >
                  <el-button
                    style="margin-left: 10px"
                    v-if="searchState == 'condition1'"
                    type="text"
                    @click="selfRecommend(row.id)"
                    >抢单</el-button
                  >
                </router-link>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            page-sizes="[5,10]"
            @pagination="getList"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 分页功能
import Pagination from "@/components/Pagination";
// 获取当前登录账户信息
import { returnUserInformation } from "@/api/user.js";

// 服务商获取法律求助表
import { getLegalRecourseListToServiceProvider } from "@/api/lawHelp.js";

export default {
  components: { Pagination }, // 分页
  data() {
    return {
      // 分页
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      // 搜索
      searchTitle: "",
      searchState: "condition1",
      // 选择器下拉选项
      // 状态
      stateList: [
        {
          value: "condition1",
          label: "可被抢单",
        },
        {
          value: "condition2",
          label: "我已抢单",
        },
        {
          value: "condition3",
          label: "我已接单",
        },
        {
          value: "condition4",
          label: "已被他人接单",
        },
      ],
      // 数据列表
      tableData: [],
    };
  },
  // 调用初始化，一进页面就执行。
  mounted() {
    console.log("mounted()");
    this.init();
  },
  methods: {
    // 初始化
    init() {;
      this.displayList();
    },
    // 分页展示（按条件）得到的数据列表
    displayList() {
      console.log("displayList()");
      let data = {
        pageNum: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize
      };
      // 调用端口根据条件查询分页显示
      getLegalRecourseListToServiceProvider(
        data,
        this.searchState,
        this.searchTitle
      ).then((resp) => {
        this.tableData = resp.data.legalRecourseList.content;
        this.total = resp.data.legalRecourseList.totalSize;
      });
    },
    getList() {
      // 获取数据
    },
    // 根据条件查询
    searchByStateAndTitle() {
      console.log("根据条件查询searchByStateAndTitle()");
      this.displayList();
    },
    // 抢单
    selfRecommend(rowId) {
      console.log("抢单 selfRecommend(rowId)");
    },
  },
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1100px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>